<template>
  <div>
    <div class="block">
      <div class="card" :class="wasteCardStyle" hover-class=''>
        <div style="margin-right: 60rpx;">
          <div class="title">{{wasteCard.name}}</div>
          <div class="desc">{{wasteCard.description}}</div>
          <div class="list">
            <ul>
              <li v-for="(item,index) in wasteCard.deliveryDescriptionList" :key="index">•{{item}}</li>
            </ul>
          </div>
        </div>
        <div>
          <img :src="iconPath" alt="">
        </div>
      </div>
    </div>

    <div class="wastelist">
      <div class="item" v-for="(item, index) in wastelist" :key="index">
        <div :class="wasteItemStyle" :hover-class="wasteItemHoverStyle">
          <span>{{item.name}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { RECYCLABLE_WASTE, HAZARDOUS_WASTE, HOUSEHOLD_FOOD_WASTE, RESIDUAL_WASTE } from '../../utils/data.js'

export default {
  data () {
    return {
      wasteCard: '',
      wasteCardStyle: '',
      wasteItemStyle: '',
      wasteItemHoverStyle: '',
      wastelist: [],
      flag: '',
      iconPath: ''
    }
  },

  onLoad (options) {
    this.flag = options.id
    this.showStyle(this.flag)
  },

  onShow () {
    this.showWasteCard(this.flag)
    this.showWasteList(this.flag)
  },

  methods: {
    /**
     * 显示页面样式
     */
    showStyle (flag) {
      this.iconPath = '../../static/images/wasteyard/icon' + flag + '.png'
      switch (flag) {
        case '1':
          this.wasteCardStyle = 'card-bgc-1'
          this.wasteItemStyle = 'wasteitem-bg-1'
          this.wasteItemHoverStyle = 'wasteitem-bg-hover-1'
          break
        case '2':
          this.wasteCardStyle = 'card-bgc-2'
          this.wasteItemStyle = 'wasteitem-bg-2'
          this.wasteItemHoverStyle = 'wasteitem-bg-hover-2'
          break
        case '3':
          this.wasteCardStyle = 'card-bgc-3'
          this.wasteItemStyle = 'wasteitem-bg-3'
          this.wasteItemHoverStyle = 'wasteitem-bg-hover-3'
          break
        case '4':
          this.wasteCardStyle = 'card-bgc-4'
          this.wasteItemStyle = 'wasteitem-bg-4'
          this.wasteItemHoverStyle = 'wasteitem-bg-hover-4'
          break
      }
    },
    /**
     * 显示垃圾列表
     */
    showWasteList (flag) {
      switch (flag) {
        case '1':
          this.wastelist = RECYCLABLE_WASTE.result
          break
        case '2':
          this.wastelist = RESIDUAL_WASTE.result
          break
        case '3':
          this.wastelist = HOUSEHOLD_FOOD_WASTE.result
          break
        case '4':
          this.wastelist = HAZARDOUS_WASTE.result
          break
      }
    },

    /**
     * 显示垃圾卡片
     */
    showWasteCard (flag) {
      const wasteInfo = [
        {
          'code': 'RECYCLABLE_WASTE',
          'name': '可回收物',
          'description': '是指废纸张、废塑料、废玻璃制品、废金属、废织物等适宜回收、可循环利用的生活废弃物。',
          'deliveryDescriptionList': [
            '应尽量保持清洁干燥，避免污染',
            '立体包装应清空内容物，清洁后压扁投放',
            '易破损或有裹尖锐边角的应包后投放'
          ]
        }, {
          'code': 'RESIDUAL_WASTE',
          'name': '干垃圾',
          'image': 'http://yiche-erp-test.oss-cn-hangzhou.aliyuncs.com/image/web/fadd5ee7-06dd-41f6-84ca-a98518e8b3a8.png',
          'description': '即其它垃圾，指除可回收物、有害垃圾、湿垃圾以外的其它生活废弃物。',
          'deliveryDescriptionList': [
            '投放前尽量沥干水分',
            '难以分辨类别的生活垃圾投放干垃圾容器内'
          ]
        }, {
          'code': 'HOUSEHOLD_FOOD_WASTE',
          'name': '湿垃圾',
          'image': 'http://lajiguanjia-pro.oss-cn-shanghai.aliyuncs.com/image/web/b87f20df-a452-4be4-866d-a0aba38537a9.jpg',
          'description': '是指易腐垃圾，指食材废料、剩菜剩饭、过期食品、瓜皮果核、花卉绿植、中药药渣等易腐的生物质生活废弃物。',
          'deliveryDescriptionList': [
            '应从产生时就与其他品种垃圾分开收集',
            '投放前尽量沥干水分',
            '有外包装的应去除外包装投放'
          ]
        }, {
          'code': 'HAZARDOUS_WASTE',
          'name': '有害垃圾',
          'description': '是指废电池、废灯管、废药品、废油漆及其容器等对人体健康或者自然环境造成直接或者潜在危害的生活废弃物。',
          'deliveryDescriptionList': [
            '应注意轻放',
            '易破碎的及废弃药品应连带包装或包裹后投放',
            '压力灌装容器应排空内容物后投放'
          ]
        }
      ]
      this.wasteCard = wasteInfo[flag - 1]
      wx.setNavigationBarTitle({
        title: this.wasteCard.name
      })
    }
  }
}
</script>

<style lang='less' scoped>
.block {
  transform-style: preserve-3d;
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -ms-perspective: 1000;
  perspective: 1000;
}
.card {
  margin: 30rpx;
  border-radius: 20rpx;
  padding: 50rpx;
  color: #fff;
  display: flex;
  flex-direction: row;
  .title {
    font-size: 34rpx;
  }
  .desc {
    font-size: 28rpx;
    margin: 15rpx 0;
  }
  .list {
    font-size: 24rpx;
  }
  img {
    height: 80rpx;
    width: 80rpx;
  }
  transition: 0.8s;
}
.card:hover {
  transform: rotateY(360deg);
}

.wastelist {
  margin: 60rpx 40rpx 40rpx 40rpx;
  font-size: 28rpx;
  overflow: hidden;
  padding: 10rpx;
  text-align: center;
  .item {
    width: 48%;
    height: 60rpx;
    margin-bottom: 40rpx;
  }
  .item:nth-child(odd) {
    float: left;
  }
  .item:nth-child(even) {
    float: right;
  }
  .item > div {
    padding: 20rpx;
    border-radius: 100rpx;
  }
}

.card-bgc-1 {
  background: #1d75e3;
}
.wasteitem-bg-1 {
  .bg-font-color(#d0e4fd, #1d75e3);
}
.wasteitem-bg-hover-1 {
  .bg-font-color(#1d75e3, #d0e4fd);
}
.card-bgc-2 {
  background: #4a4a4a;
}
.wasteitem-bg-2 {
  .bg-font-color(rgb(201, 201, 201), #4a4a4a);
}
.wasteitem-bg-hover-2 {
  .bg-font-color(#4a4a4a, rgb(201, 201, 201));
}
.card-bgc-3 {
  background: #b15941;
}
.wasteitem-bg-3 {
  .bg-font-color(rgb(255, 229, 222), #b15941);
}
.wasteitem-bg-hover-3 {
  .bg-font-color(#b15941, rgb(255, 229, 222));
}
.card-bgc-4 {
  background: #fb0707;
}
.wasteitem-bg-4 {
  .bg-font-color(rgb(255, 225, 225), #fb0707);
}
.wasteitem-bg-hover-4 {
  .bg-font-color(#fb0707, rgb(255, 225, 225));
}

.bg-font-color(@color1, @color2) {
  background: @color1;
  color: @color2;
}
</style>
